<template>
	<view class="content">
		<view class="header">
			<view :class="['headLine',{headColor:authenticationStatus == 2}]">{{authenticationStatus | getFilter}}</view>
			<view class="headerTip" v-if="authenticationStatus == 0">一般实名认证时间在3-7个工作日，请耐心等待</view>
			<view class="headerTip" v-if="authenticationStatus == 2">失败原因：{{datas.reason}}</view>
			<view class="headBtn" v-if="authenticationStatus == 2" @click="reapply">重新申请</view>
		</view>
		<view class="authentication">
			<view class="authTitle">认证信息</view>
			<view class="list">
				<view class="list_fl">身份证号</view>
				<view class="list_fr">{{datas.cardNumber}}</view>
			</view>
			<view class="list">
				<view class="list_fl">姓名</view>
				<view class="list_fr">{{datas.realName}}</view>
			</view>
			<view class="list">
				<view class="list_pic" @click="preview(1,datas.cardFront)">
					<image class="img" :src="datas.cardFront" mode="aspectFit"></image>
				</view>
				<view class="list_pic" @click="preview(2,datas.cardReverse)">
					<image class="img" :src="datas.cardReverse" mode="aspectFit"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				authenticationStatus:'',
				datas:{}
			}
		},
		onLoad(options) {
			console.log(options)
			this.authenticationStatus = options.authenticationStatus
			this.getAuthentication()
		},
		filters:{
			getFilter: function (val) {
				if (val == 0) {
					return '您已经成功发起实名认证'
				} else if (val == 1) {
					return '恭喜您！认证成功啦～'
				} else if (val == 2) {
					return '很遗憾！认证失败'
				}
			}
		},
		methods: {
			// 获取认证详情
			getAuthentication: function () {
				this.api.authenticationDetail().then(res => {
					console.log(res)
					this.datas = res.data;
				})
			},
			// 重新申请
			reapply: function () {
				uni.redirectTo({
					url: '../authentication?id=' + this.datas.id,
				});
			},
			// 图片预览
			preview: function (type,imggroup) {
				let imglist = imggroup.split(" ");
				uni.previewImage({
					current: imglist[0],
					loop: true,
					urls: imglist
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		width: 100%;
		box-sizing: border-box;
		background: #F5F5F5;
		padding: 20rpx;
		font-family: 'PingFang SC';
		letter-spacing: 3rpx;
	}
	.content {
		width: 100%;
		box-sizing: border-box;
	}
	.header {
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		padding: 30rpx 30rpx 80rpx 30rpx;
		border-radius: 8rpx;
		position: relative;
		.headLine {
			font-size: 36rpx;
			color: #140005;
			line-height: 40rpx;
			padding-bottom: 20rpx;
			font-weight: 500;
		}
		.headColor {
			color: #E42221;
		}
		.headerTip {
			width: 100%;
			box-sizing: border-box;
			font-size: 22rpx;
			color: #666666;
			line-height: 40rpx;
		}
		.headBtn {
			width: 165rpx;
			height: 56rpx;
			text-align: center;
			line-height: 56rpx;
			font-size: 24rpx;
			color: #E42221;
			border: 2rpx solid #E42221;
			border-radius: 100rpx;
			position: absolute;
			right: 30rpx;
			bottom: 20rpx;
			z-index: 5;
		}
	}
	.authentication {
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		padding: 0 22rpx 70rpx 22rpx;
		border-radius: 12rpx;
		font-size: 30rpx;
		color: #212121;
		margin-top: 20rpx;
		.authTitle {
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx 0;
			line-height: 60rpx;
			border-bottom: 2rpx solid #F8F8F8;
		}
		.list {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			line-height: 60rpx;
			border-bottom: 2rpx solid #F8F8F8;
			.list_fl {
				color: #999999;
			}
			.list_pic {
				width: 296rpx;
				height: 184rpx;
				margin: 50rpx 15rpx 0 15rpx;
				.img {
					width: 100%;
					height: 100%;
				}
			}
		}
		
		
		
		
		
	}

</style>
